<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Calendar"%>
<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="pt-br">
	<head>
   		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta charset="iso-8859-1">
   		<meta name="viewport" content="width=device-width, initial-scale=1.0">
   		<meta name="description" content="O aplicativo SK8 Central vem para ajudar skatistas a encontrar e cadastrar picos de skate">
   		<meta name="keywords" content="skate,sk8,pistas,pista,pico,pisocs,app,skate celular,aplicativo, encontrar pistas">
		<meta name="author" content="SK8 Central">
		<!--
    	<link rel="shortcut icon" href="img/ico/sk8central.ico">
		-->
   		<title>SK8 Central | Skate App</title>

	    <!-- Bootstrap CSS -->
	    <link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">

	</head>

	<body>
			
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand nav-external" href="#home">SK8 Central</a>
				</div>
	          
	          
	
	        	<!-- Nav bar -->
	        	<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
	            	<ul class="nav navbar-nav">
	                	<li class="active"><a href="#home">InÃ­cio</a></li>
						<li><a href="#services">Como Funciona?</a></li>
						<li><a href="#work">Fotos</a></li>
						<!-- 
						<li>
							<a href="#clients">Clients</a>
						</li>
						-->
						<li><a href="#about">Sobre</a></li>
						<li><a href="#contact">Contato</a></li>
     		 		</ul>
	        	</div>
	        	<!-- /.navbar-collapse -->
	    	</div>
	    	<!-- /.container -->
		</nav>
		
		<section id="map_canvas" class="intro" style="height: 700px; width: 100%;">
		 <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                    	<h1 class="brand-heading">Hi, I'm Andrew.</h1>
                        <p class="intro-text">Art student & freelance designer passionate about creating clean interfaces for web, mobile, and desktop applications.</p>
                        <div class="page-scroll">
                            <a href="#portfolio" class="button">See my work</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		</section>
		
		<section id="services" class="page">
			<div class="container">
				<div class="content text-center">
					<div class="heading">
						<h2>O que ele Faz?</h2>
						<div class="border"></div>
						<p>O aplicativo SK8 Central vem para ajudar skatistas a
						encontrar e cadastrar picos de skate.</p>
					</div>
					
					<div class="row">
						<div class="col-lg-4 service animated hiding"
							data-animation="fadeInUp" data-delay="300">
							<i class="fa fa-globe fa-5x"></i>
							<h3>
								<a href="#"> Encontre </a>
							</h3>
							<p>Localize novos picos ara andar de skate de forma fácil e
								rápida. Com um simples toque você encontra a pista mais próxima
								de você e ainda pode traçar a rota para chegar nela! Sensacional
								não?</p>
						</div>
						<div class="col-lg-4 service animated hiding"
							data-animation="fadeInUp" data-delay="600">
							<i class="fa fa-plus-square fa-5x"></i>
							<h3>
								<a href="#">Cadastre</a>
							</h3>
							<p>Sabe aquele pico bacana que só você conhece? Que tal
								compartilhá-lo com a galera? Cadastre novos picos e chame seus
								Brothers pra um role de carrinho. O vai ficar a e moscando
								sozinho?</p>
						</div>
						<div class="col-lg-4 service animated hiding"
							data-animation="fadeInUp" data-delay="900">
							<i class="fa fa-map-marker fa-5x"></i>
							<h3>
								<a href="#"> Trace o Caminho </a>
							</h3>
							<p>Putz onde fica aquela pista mesmo? Encontre o caminho para
								pista de rapidinho! Siga a rota até a pista que deseja e ganhe
								mais tempo no role.</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	
	
	<section id="work" class="page">
		<div class="container">
			<div class="content text-center">
				<div class="heading">
					<h2>Olha como usamos o APP!</h2>
					<div class="border"></div>
					<p>Agora não dá mais para ficar andando naquele pico manjado.
						Conheça novos locais.</p>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div id="portfolio">
							<ul class="filters list-inline">
								<li><a class="active" data-filter="*" href="#">Todas</a></li>
								<li><a data-filter=".photography" href="#">Picos</a></li>
								<li><a data-filter=".branding" href="#">Brothers</a></li>
								<li><a data-filter=".web" href="#">App</a></li>
							</ul>
							<ul class="items list-unstyled clearfix animated hiding"
								data-animation="fadeInRight">
								<li class="item branding"><a href="#"> <!-- <img src="assets/img/work/1.jpg" alt="Sk8-Skate-"> -->
										<img
										src="https://sk8central.blob.core.windows.net/picoimages/15452097-6150-4178-a395-5da680fc4c36.jpg"
										style="width: 450px; height: 300px;">

										<div class="overlay">
											<span>Etiam porta</span>
										</div>
								</a></li>
								<li class="item photography"><a href="#"> <img
										src="assets/img/work/2.jpg" alt="Sk8-Skate-"
										style="width: 450px; height: 300px;">
										<div class="overlay">
											<span>Lorem ipsum</span>
										</div>
								</a></li>
								<li class="item branding"><a href="#"> <img
										src="assets/img/work/3.jpg" alt="Sk8-Skate-"
										style="width: 450px; height: 300px;">
										<div class="overlay">
											<span>Vivamus quis</span>
										</div>
								</a></li>
								<li class="item photography"><a href="#"> <img
										src="assets/img/work/4.jpg" alt="Sk8-Skate-">
										<div class="overlay">
											<span>Donec ac tellus</span>
										</div>
								</a></li>
								<li class="item photography"><a href="#"> <img
										src="assets/img/work/5.jpg" alt="Sk8-Skate-">
										<div class="overlay">
											<span>Etiam volutpat</span>
										</div>
								</a></li>
								<li class="item web"><a href="#"> <img
										src="assets/img/work/6.jpg" alt="Sk8-Skate-">
										<div class="overlay">
											<span>Donec congue </span>
										</div>
								</a></li>
								<li class="item photography"><a href="#"> <img
										src="assets/img/work/7.jpg" alt="Sk8-Skate-">
										<div class="overlay">
											<span>Nullam a ullamcorper diam</span>
										</div>
								</a></li>
								<li class="item web"><a href="#"> <img
										src="assets/img/work/8.jpg" alt="Sk8-Skate-">
										<div class="overlay">
											<span>Etiam consequat</span>
										</div>
								</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	
	<section id="about" class="page">
		<div class="container">
			<div class="content text-center">
				<div class="heading">
					<h2>Sobre Nós</h2>
					<div class="border"></div>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
						sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
						nisi ut aliquip ex ea commodo consequat duis aute irure dolor.</p>
				</div>

				<div class="row">
					<div class="col-md-6 col-sm-6 col-xs-12 teammate animated hiding"
						data-animation="fadeInUp" data-delay="300">
						<div class="profile-photo">
							<!-- <img class="img-responsive" src="img/team/Sk8_Central_Skate_App_Samuel.jpg" title="Sk8 Central Skate App Samuel" alt="Sk8 Central Skate App Samuel"> -->
							<img class="img-responsive" src="img/team/Samuel.jpg"
								title="Sk8 Central Skate App Samuel"
								alt="Sk8 Central Skate App Samuel">
								<!-- style="width: 550px; height: 367px;"> -->

						</div>
						<div class="bio">
							<h4>Samuel Vasconcelos</h4>
							<h5>Desenvolvedor</h5>
							<div class="border"></div>
							<p>Lorem ipsum dolor sit, consetetur sadipscing elitr, diam
								nonumy eirmod tempor invidunt ut labore.</p>
							<ul class="list-inline">
								<li><a href="http://www.facebook.com" title="Facebbok">
										<i class="fa fa-facebook-square"></i>
								</a></li>
								<li><a href="http://www.twitter.com" title="Twitter"> <i
										class="fa fa-twitter"></i>
								</a></li>
								<li><a href="http://www.instagram.com" title="Instagram">
										<i class="fa fa-instagram"></i>
								</a></li>
							</ul>
						</div>
					</div>

					<div class="col-md-6 col-sm-6 col-xs-12 teammate animated hiding"
						data-animation="fadeInUp" data-delay="300">
						<div class="profile-photo">
							<img class="img-responsive"
								src="img/team/Sk8_Central_Skate_App_Alison.jpg" title=“Sk8 Skate
								Equipe Ailson” alt="Sk8 Skate Equipe Ailson">
							<!-- <img class="img-responsive" src="img/team/alison.jpg" title="Sk8 Central Skate App Samuel" alt="Sk8 Central Skate App Samuel" style="width: 550px; height: 367px;">  -->
						</div>
						<div class="bio">
							<h4>Alison Chaves</h4>
							<h5>Desenvolvedor</h5>
							<div class="border"></div>
							<p>Lorem ipsum dolor sit, consetetur sadipscing elitr, diam
								nonumy eirmod tempor invidunt ut labore.</p>
							<ul class="list-inline">
								<li><a href="http://www.facebook.com" title="Facebbok">
										<i class="fa fa-facebook-square"></i>
								</a></li>
								<li><a href="http://www.twitter.com" title="Twitter"> <i
										class="fa fa-twitter"></i>
								</a></li>
								<li><a href="http://www.instagram.com" title="Instagram">
										<i class="fa fa-instagram"></i>
								</a></li>
							</ul>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="twitter text-center">
			<div class="animated hiding" data-animation="fadeIn">
				<i class="fa fa-twitter fa-3x"></i>
				<div id="feed"></div>
			</div>
		</div>
	</section>
	
	<section id="contact" class="page">
		<div class="container">
			<div class="content cover text-center">
				<div class="heading">
					<h2>Entre em contato</h2>
					<div class="border"></div>
					<p>Caso tenham alguma dúvida, sugestão ou crítica:</p>
				</div>
				<div class="row">
					<div class="col-lg-4 animated hiding" data-animation="fadeInRight"
						data-delay="600">
						<i class="fa fa-map-marker fa-3x"></i> <a
							href="http://www.google.com.br/maps/place/Osasco/@-23.5330569,-46.7845239,12z/data=!3m1!4b1!4m2!3m1!1s0x94ce5583db0fdfef:0x90ee3c33b723aa9c">
							Osasco/SP, Brasil </a>
					</div>
					<div class="col-lg-4 animated hiding" data-animation="fadeInDown"
						data-delay="300">
						<i class="fa fa-phone fa-3x"></i> <a href="tel:11958983003">
							+55 11 9 5898 3003 </a>
					</div>
					<div class="col-lg-4 animated hiding" data-animation="fadeInLeft"
						data-delay="600">
						<i class="fa fa-envelope fa-3x"></i> <a
							href="mailto:wpdevsolutions@outlook.com">
							wpdevsolutions@outlook.com </a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<footer id="footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 animated hiding" data-animation="fadeInUp">
					<ul class="social list-inline ">
						<li><a class="facebook"
							href="https://www.facebook.com/sk8centralapp" title="Facebook">
								<i class="fa fa-facebook fa-2x"></i>
						</a></li>
						<li><a class="twitter" href="http://www.twitter.com"
							title="Twitter"> <i class="fa fa-twitter fa-2x"></i>
						</a></li>
						<li><a class="google-plus" href="http://www.plus.google.com"
							title="Google+"> <i class="fa fa-google-plus fa-2x"></i>
						</a></li>

					</ul>
					<p class="copyright">
						Criado por <a href="http://www.sk8central.com.br">SK8 Central</a>
						&middot; Baseado em <a href="http://getbootstrap.com/">Bootstrap</a>
						&middot; Ícones por <a href="http://fontawesome.io/">Font
							Awesome</a>&middot; <a href="http://aws.amazon.com/pt/websites/">Amazon
							Project</a>
					</p>
				</div>
			</div>
		</div>
	</footer>
	
	
	
		<script src="resources/js/jquery.min.js"></script>

   		<!-- API MAPS -->
    	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJpdPBTCpRyZ617z8Dr_mF9LlbhCgllGA&sensor=TRUE"></script>
    
		<!--INICIA O MAPA -->
        <script src="resources/js/mapa.js"></script>
        
	</body>
</html>